<template>
  <view >
    <!-- 背景遮罩 -->
    <view class="music-mask">
      <image src="../../static/555.webp" mode=" " ></image>
    </view>
    
      <!-- 头部 -->
    <view class="nusic-navbar">
      <view class="iconfont icon-fanhui" @click="goToBack"> </view>
       <view class="music-switch">
         <text class="" @click="changeMusic"  >歌曲</text>
         <p>|</p>
         <text @click="changeText"  class=" ">歌词</text>
       </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-music-play",
    data() {
      return {
      
      };
    },
    methods:{
      changeMusic(){
      uni.navigateTo({
        url:'/subpkg/music-play/music-play'
      })  
      },
      changeText(){
        uni.navigateTo({
          url:'/subpkg/music-txt/music-txt'
        })
      },
      goToBack(){
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss">

  .music-mask{
    position:absolute;
        top: -2.5%;
        left: -2.5%;
        z-index: -2;
        height: 105%;
        width: 105%;
        filter: blur(10rpx) brightness(30%);
    image{
      width: 100%;
      height: 100%;
    }
  }
  
  .nusic-navbar{
    height: 100rpx;
    margin-top: 46rpx;
   display: flex;
   align-items: center;
  justify-content: space-between;
       width: 400rpx;
       padding-left: 38rpx;
      
    .iconfont{
      font-size: 48rpx;
      font-weight: 600;
      color: #efefef;
    }
    .music-switch{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
       color: #bcbdb8;
       p{
         padding: 0 10rpx;
       }
         .active{
           color: #efefef;
         }
    }
   }

</style>